<template>
  <div>
    <!-- 首页头部标签 -->
    <header class="home-header wrap" :class="{'active': handerActive}">
      <i class="iconfont iconfont-gengduo"></i>
      <div class="header-search">
        <span class="app-name">G</span>
        <i class="iconfont iconfont-fangdajing1"></i>
        <span class="search-title">家电返场同价11.11</span>
      </div>
      <span v-if="isLogin" @click="$router.replace('/login')">登录</span>
      <i class="iconfont iconfont-icon_gerenyonghu" v-else @click="handMe"></i>
    </header>

    <!-- 轮播 -->
    <van-swipe class="imges" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="images[index].imgUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品 分类 -->
    <van-grid class="fenlei" square :column-num="number" :border="flag">
      <van-grid-item
        v-for="value in 10"
        :key="value"
        :icon="list[value - 1].imgUrl"
        :text="list[value - 1].name"
        @click="$router.push('/product-list/1')"
        
      />
    </van-grid>

    <!-- 首页的商品推荐 -->
    <section class="floor-list" v-for="(item, index) in content" :key="index">
      <div class="floor-wrap">
        <img
          :src="item.headUrl"
          class="floor-head"
        />
        <div class="floor-content" >
          <!-- 真实环境下，不可以绑定index -->
          <div class="floor-category" v-for="(count, index) in item.list" :key="index">
            <p>{{ count.title }}</p>
            <p>{{ count.desc }}</p>
            <div class="floor-products">
              <img
                :src="count.products[0].imgUrl"
              /><img
                :src="count.products[1].imgUrl"
              />
            </div>
          </div>
          <!-- <div class="floor-category">
            <p>MMall家电</p>
            <p>家电狂欢 京彩有你</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t22363/318/1484948466/11138/8317fc9b/5b2a528eN7c6bde83.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t22666/293/257815171/29274/6b5605b1/5b2a5295N5a81ad96.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>MMall超市</p>
            <p>超市大放价 抢超值好货</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/n1/jfs/t16852/170/2693122660/56143/28da8c2a/5b063c63N5746e4e4.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/n1/jfs/t18877/293/2631103430/85245/f220b40d/5b063c6fN7820b399.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>爱家</p>
            <p>家纺热卖 部分低至9.9元</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t15244/283/356547262/47743/b6607b0f/5a2a6d51N8830e8b8.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t16057/38/102057973/36179/b957e4ec/5a2a6d55N83655f7f.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>家有萌宝</p>
            <p>低至五折</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/n1/jfs/t17929/299/899794385/17291/d90318f9/5ab4c680N7d291625.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/n1/jfs/t18802/262/2452746578/333259/5dcdfb06/5af3ffb4N0c700b57.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>爱吃</p>
            <p>9.9包邮，夏日也生动</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t14473/103/2042876100/41836/766c1953/5a697f47Nc952ed7f.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t17155/227/2678303408/52223/f7a950c/5b0535d6Ne4073be7.jpg!q70.jpg.dpg"
              />
            </div>
          </div> -->
        </div>
      </div>
      <!-- <div class="floor-wrap">
        <img
          src="//m.360buyimg.com/mobilecms/jfs/t19381/275/717008577/26686/e58b7ef4/5aa23f27Nfa6d6be3.png!q70.jpg.dpg"
          class="floor-head"
        />
        <div class="floor-content">
          <div class="floor-category">
            <p>智能家电馆</p>
            <p>满减狂欢</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t25183/247/391394027/33684/8e1af9dc/5b6d048aNd7dae520.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/mobilecms/s240x240_jfs/t1/839/25/11121/19615/5bccb3a0E4b504f77/e55c2fb826efe911.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>珠宝馆</p>
            <p>满减优惠</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/n1/jfs/t19009/357/347377157/13661/d0d9e5fb/5a6e8bb3Nd6182f9f.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/n1/jfs/t27889/231/477152414/149859/7a5fb585/5baf1f58N45c2ca6c.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>鞋靴箱包</p>
            <p>低至五折</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/n1/jfs/t21469/359/769885083/29352/68865ed/5b178e49Nc5db7341.jpg!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/mobilecms/jfs/t1/7091/11/2919/441267/5bd578bfE03e7166a/c5d5222c1802fd21.jpg!q70.jpg.dpg"
              />
            </div>
          </div>
          <div class="floor-category">
            <p>童装馆</p>
            <p>春夏小萌娃</p>
            <div class="floor-products">
              <img
                src="//m.360buyimg.com/n1/jfs/t20614/194/808562651/89118/894d41a5/5b18ba8dN855ebe44.png!q70.jpg.dpg"
              /><img
                src="//m.360buyimg.com/n1/jfs/t12460/183/2350810548/47292/f4c5485/5a914202Nfc1b8a12.png!q70.jpg.dpg"
              />
            </div>
          </div>
        </div>
      </div> -->
    </section>
    <tabBar></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import { getSlider, getCategory, getFloorlist } from "../../api";
export default {
  data() {
    return {
      list: [
        {
          icon: "//m.360buyimg.com/mobilecms/jfs/t18454/342/2607665324/6406/273daced/5b03b74eN3541598d.png",
          text: "Go超市",
        },
        { icon: "photo-o", text: "全球Go" },
        { icon: "photo-o", text: "Go时尚" },
        { icon: "photo-o", text: "Go生鲜" },
        { icon: "photo-o", text: "Go到家" },
        { icon: "photo-o", text: "充值激费" },
        { icon: "photo-o", text: "9.9元拼" },
        { icon: "photo-o", text: "领券" },
        { icon: "photo-o", text: "省钱" },
        { icon: "photo-o", text: "全部" },
      ],
      isLogin: '',
      flag: false,
      number: 5,
      images: [
        "http://m.360buyimg.com/mobilecms/s1125x690_jfs/t29188/301/133996293/200131/61f42a01/5be8eed6Nda6a18a5.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "http://m.360buyimg.com/mobilecms/s1125x690_jfs/t30757/316/208746402/123953/9fa18794/5beb7d13Ne77e9f29.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "http://m.360buyimg.com/mobilecms/jfs/t1/3926/29/4138/254748/5b9b646dE45cbeb7f/f80c8f7c24273bc1.jpg!cr_1125x549_0_72",
      ],
      // 推荐 商品数据
      content: [],
      handerActive: false

    };
  },
  methods: {
    // 点击小人到个人中心页面
    handMe() {
      this.$router.push('/user')
    },
    pageScoll() {
      // console.log('====');
      // 获取滚动的距离
      let scollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scollTop > 100 ? this.handerActive = true : this.handerActive = false
    }
  },
  components: {
    tabBar,
  },

  created() {
    // this.$route.puth = "/product-list";
    // console.log(this);
    // 判断用户是否登录
    this.isLogin = !this.$store.getters.getIsLogin
    // console.log(this.isLogin);
    
    // 获取轮播数据
    getSlider((data) => {
      this.images = data.data.data;
      // console.log(this.images);
    });

    // 获取分类数据
    getCategory((data) => {
      // console.log(data.data.data);
      this.list = data.data.data;
    });

    // 推荐商品数据
    getFloorlist((data => {
      // console.log(data.data.data);
      this.content = data.data.data
      // console.log(this.content[0].headUrl);
      // console.log(this.content[0].list);
    }))
  },
  mounted() {
    window.addEventListener('scroll', this.pageScoll)
  }
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";
.imges img {
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.active {
  background-color: red !important;
}
.home-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #fff;
  z-index: 10000;
  // background: $red;
  background-color: rgba(0, 0, 0, 0);

  
  .icon-caidan {
    font-size: 50px;
  }
  // 多选图标
  .iconfont-gengduo,
  .iconfont-icon_gerenyonghu::before {
    font-size: 46px;
  }
  // 搜索图标
  .icon-fangdajing1 {
    padding: 0 10px;
    font-size: 25px;
    color: #666;
  }

  .header-search {
    display: flex;
    width: 74%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #fff;
    @include borderRadius(40px);

    .app-name {
      padding: 0 20px;
      color: $red;
      font-size: 40px;
      font-weight: bold;
      border-right: 1px solid #666;
    }

    .icon-search {
      padding: 0 20px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
    }
  }

  .icon-iconyonghu {
    font-size: 44px;
  }
}

// 商品推荐
.floor-list {
  width: 100%;
  padding-bottom: 100px;

  .floor-head {
    width: 100%;
    height: 80px;
    background: #f6f6f6;
  }

  .floor-content {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
    @include boxSizing;

    .floor-category {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      @include boxSizing;

      &:nth-child(2n) {
        border-right: none;
      }

      p {
        font-size: 34px;
        color: #333;

        &:nth-child(2) {
          padding: 10px 0;
          font-size: 26px;
          color: $red;
        }
      }

      .floor-products {
        display: flex;
        justify-content: space-around;
        width: 100%;

        img {
          width: 130px;
          height: 130px;
        }
      }
    }
  }
}
</style>
<style>
.fenlei img {
  width: 60px;
  height: 60px;
}
</style>